<div id="maincontent">
    <!--begin sidebar-left-->
    <div id="sidebar-left">
    <?php if(count($this->listNewMember) > 0):?>
        <?php echo $this->partial('index/new-member.phtml', array('listNewMember' => $this->listNewMember));?>
    <?php else :?>
        <p>There are no New member</p>
    <?php endif;?>
    </div>
    <!--end sidebar-left-->
    <!--begin sidebar-left-2 -->
    <div id="sidebar-left-2" class="two">
    <?php if(count($this->listGoingViral) > 0):?>
        <?php echo $this->partial('index/going-viral.phtml', array('listGoingViral' => $this->listGoingViral));?>
    <?php else:?>
        <p>There are no Going Viral member</p>
    <?php endif;?>
    </div>
    <!--end sidebar-left-2-->
    <!--begin sidebar-left-3 -->
    <div id="sidebar-left-3" class="two">
    <?php if(count($this->listTopMember) > 0):?>
        <?php echo $this->partial('index/top-member.phtml', array('listTopMember' => $this->listTopMember));?>
    <?php else:?>
        <p>There are no Top member</p>
    <?php endif;?>
    </div>
    <!--end sidebar-left-3-->
    <div class="clearfix"></div>
</div>
<?php $endUserlistTopMember = end($this->listGoingViral);?>
<?php $endUserTopMember = end($this->listTopMember);?>
<script type="text/javascript">
$(function(){
    var baseUrl = '<?php echo $this->baseUrl();?>';
    var countryCode = '<?php echo $this->countryCode;?>';
    var endViral = '<?php echo $endUserlistTopMember['user_id'];?>';
    var endTop = '<?php echo $endUserTopMember['user_id'];?>';
    if(endViral && endTop){
        $('#list_going_viral').scrollPagination({
            'contentPage': baseUrl + '/index/load-going-viral?c='+ countryCode +'&end='+ endViral, // the url you are fetching the results
            'contentPage1': baseUrl + '/index/load-top-member?c='+ countryCode +'&end='+ endTop, // the url you are fetching the results
            'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
            'scrollTarget': $(window), // who gonna scroll? in this example, the full window
            'heightOffset': 0, // it gonna request when scroll is 10 pixels before the page ends
            'beforeLoad': function(){ // before load function, you can display a preloader div
                $('#loading').fadeIn();
            },
            'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                 $('#loading').fadeOut();
                 var i = 0;
                 $(elementsLoaded).fadeInWithDelay();
                 if ($('#list_going_viral').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                    $('#nomoreresults').fadeIn();
                    $('#list_going_viral').stopScrollPagination();
                 }
            }
        });
    
        // code for fade in element by element
        $.fn.fadeInWithDelay = function(){
            var delay = 0;
            return this.each(function(){
                $(this).delay(delay).animate({opacity:1}, 200);
                delay += 100;
            });
        };
    }
});
</script>